json data to html

template literal
map()
ternary operator
arrow function

document.getElementById("app").innerHTML = ``  
//back tick tell javascript template literal is created
// eg. `two plus two is ${2 + 2}`
// expression is included
`
<p>hello</p>
<p>hello again</p>
`

`
<h1>Pets (${petsData.length} results)</h1>
${petsData.toString()}
${petsData.join("-")}

${petsData.map(function(pet){
	return pet.name
}).join("")}

${petsData.map(function(pet){
	return `
	<div>
		<img src="${pet.photo}">
		<h2>${pet.name} <span class="small words">${pet.species}</span></h2>
	</div>
	`
}).join("")}

// change to function to help reading
function petTemplate(pet) {
	return `
	<div>
		<img src="${pet.photo}">
		<h2>${pet.name} <span class="small words">${pet.species}</span></h2>
		<p><strong>Age: </strong>${age(pet.birthYear)}</p>
		${condition ? yay : nay}		//this is ternary operator
		${pet.favFoods ? foods(pet.favFoods) : ""}
	</div>
	`
}
function foods (foods) {
	return `
		<h4> favourite Foods</h4>
		<ul>
			${foods.map(food => `<li>${food}</li>`).join("")}
		</ul>
	`
}
function age(birthYear) {
	let calculatedAge = new Date().getFullYear() - birthYear;
	if (calculatedAge == 1) {
		return ' 1 year old'
	} else if （calculatedAge == 0） {
		return 'baby'		
	} else {
		return `${calculatedAge} years old`
	}
}

${petsData.map(petTemplate).join("")}

<p>These ${pestData.length} pets were added</p>


`